<template>
  <div class="w-[100%] h-10 bg-white flex justify-start">
    <div :class="listType == item.id
      ? 'border-red-700  border-2 leading-[10rem-2px] hover:border-red-700'
      : ''
      "
      class="box-border bg-white text-center rounded-md cursor-pointer text-xl leading-10 text-gray-800 border hover:border-gray-400 border-gray-300 w-40 h-10 mx-2"
      v-for="item in typeArr" :key="item.id" @click="goType(item)">
      {{ item.label }}
    </div>
    <div @click="goAdd(true)"
      class="box-border bg-green-300 text-center rounded-md cursor-pointer text-xl leading-10 text-gray-800 border hover:border-gray-400 hover:bg-green-600 border-gray-300 w-40 h-10 mx-2">
      +--添加记录
    </div>
    <goUrgencyList></goUrgencyList>
    <div
      @click="openPage()"
      class="box-border bg-green-300 text-center rounded-md cursor-pointer text-xl leading-10 text-gray-800 border hover:border-gray-400 hover:bg-green-600 border-gray-300 w-40 h-10 mx-2"
    >
      +--新开页面{{ openNum }}
    </div>
  </div>
  <div class="w-[100%] h-[calc(100%-40px)] bg-white overflow-hidden">
    <div class="w-[100%] h-[100%] overflow-x-auto grid grid-flow-col justify-start">
      <card-list :type="listType == 'wBFXBMN89Z1ftqCKYr1PdzVtVqKJk0h7' ? '' : listType" :name="item.label" :id="item.id"
        v-for="item in taskLIist" :key="item.id"></card-list>

      <addList></addList>
    </div>
  </div>
  <fromitem v-model="showAdd" :isAbb="isAbb"></fromitem>

</template>

<script setup lang="ts">
import type { ListType } from "@/type/todolist/card"; //引入ts类型定义
// 假设组件是默认导出，修改为默认导入方式
import CardList from "./components/cardList.vue";
import addList from "./components/addList.vue";
import goUrgencyList from "./components/goUrgencyList.vue";
import fromitem from "./components/fromitem.vue";
import "./js/init.js"; //页面初始化代码
import { ref, reactive, watchEffect, watch } from "vue";
import { uuid } from "./js/uuid.js"; //uuid 生成方法
import { urgencyList, taskCategory, taskStatus } from "./js/allList"; //引入紧急程度数据 目前先写死

const listType = ref<string>("");
const typeArr = ref<ListType[]>([]);
typeArr.value = [
  {
    id: "wBFXBMN89Z1ftqCKYr1PdzVtVqKJk0h7",
    label: "全部任务",
    bgColor: "",
  },
];
// 获取列表数据
urgencyList().then((res: ListType[]) => {
  // console.log(res);
  typeArr.value.push(...res);
});
const taskLIist = ref<ListType[]>([]);

// 获取列表数据
taskStatus().then((res: ListType[]) => {
  // console.log(res);
  taskLIist.value.push(...res);
});


listType.value = "wBFXBMN89Z1ftqCKYr1PdzVtVqKJk0h7";
const goType = function (e: ListType) {
  listType.value = e.id;
};
const showAdd = ref(false);
const isAbb = ref(true);

//新增无状态任务
const goAdd = function (item: any) {
  showAdd.value = true;
  isAbb.value = true;
};
const sleep = function (time: number) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(true)
    }, time)
  })
}
const fun = async function () {
  let time = Date.now()
  console.log(time)
  await sleep(1000)
  console.log(Date.now() - time)
}

let nums = {}

console.log(Number.isNaN(nums))
console.log(nums)
import { useCounterStore } from './stores/counter'
import { tourEmits } from "element-plus";
const pinias = useCounterStore()
watch(() => pinias.refreshType, (newval, oldval) => {
  console.log(newval)
  if (newval) {
    typeArr.value = [
      {
        id: "wBFXBMN89Z1ftqCKYr1PdzVtVqKJk0h7",
        label: "全部任务",
        bgColor: "",
      },
    ];
    // 获取列表数据
    urgencyList().then((res: ListType[]) => {
      // console.log(res);
      typeArr.value.push(...res);
    });
    listType.value = "wBFXBMN89Z1ftqCKYr1PdzVtVqKJk0h7"
    taskLIist.value = []
    taskStatus().then((res: ListType[]) => {
      // console.log(res);
      taskLIist.value.push(...res);
    });


  }


},)
let  openNum  = ref(0)
const  openFun= function (e: any) {
  console.log(e)
  openNum.value += 1
 
}
declare global {
  interface Window {
    addfunS: (param: any) => void; // 声明自定义方法
  }
}
 window.addfunS   = openFun;
const openPage = function () {

  window.open('/about', '_blank');
}
</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 隐藏滚动条轨道 */
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* 自定义滚动条滑块 */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

:deep(::-webkit-scrollbar-button) {
  display: none;
  background: transparent;
  color: transparent;
}

/* 滑块悬停状态 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* 兼容 Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
  -ms-overflow-style: none;
  /* border-radius:5px; */
}
</style>